axios.defaults.baseURL = 'http://cba.itlike.com/public/index.php?s=/api/'

// 点击返回按钮返回上一页面
document.querySelector('.back').addEventListener('click', () => history.back())

let goods_Sku
// 首页点击商品后跳转
const goodsId = localStorage.getItem('goodsInformation')
// console.log(goodsId)
axios({
    url: '/goods/detail',
    params: {
        goodsId
    }
}).then(res => {
  console.log(res)
  goods_Sku = res.data.data.detail.skuList[0].goods_sku_id
    const pic = res.data.data.detail.goods_images
    // 图片渲染
    document.querySelector('.swiper-wrapper').innerHTML = pic.map(ele =>`<div class="swiper-slide"><img src="${ele.preview_url}" alt="" /></div>`).join('')
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination', // nextButton: '.swiper-button-next', // prevButton: '.swiper-button-prev',
        paginationClickable: true,
        spaceBetween: 0,
        centeredSlides: true,
        autoplay: 2500,
        // loop:true,
      autoplayDisableOnInteraction: false,
    })
    // 图片计数器
    let picArr = document.querySelectorAll('.swiper-slide')
    console.log(picArr)
    picArr.forEach((ele, index) => {
        return document.querySelector('.picnum').innerHTML = `
        <span class="change">${index + 1}</span>
        <span class="xian">/</span>
        <span class="length">${picArr.length}</span>
        `
    })
    // 渲染文字
    const info = res.data.data.detail
    document.querySelector('.goodsname').innerHTML = `
    <div class="price">
        <div class="left">
          <span class="min">￥</span>
          <span class="yuan">${info.goods_price_min}</span>
          <span class="discount">${info.line_price_max==='0.00'?'':`￥${info.line_price_max}`}</span>
        </div>
        <div class="right">
          <span class="tex">已售${info.goods_sales}件</span>
        </div>
      </div>
    <div class="tradename">
      <span class=" text  ellipsis-2">${info.goods_name}</span>
    </div>
    `
    document.querySelector('.information_pic').innerHTML = res.data.data.detail.content
})

// 首屏渲染评论
async function talk() {
    const res = await axios.get('/comment/listRows', {
        params: {
            goodsId,
            limit:2
        }
    })
    // console.log(res.data.data.list)
    document.querySelector('.talk').innerHTML = res.data.data.list.map(ele => `
    <div class="comment-item">
          <div class="head">
            <!-- 用户头像和名子 -->
            <div class="username">
              <img src="${ele.user.avatar_url ? ele.user.avatar_url :'http://cba.itlike.com/public/mweb/static/default-avatar.png'}" alt="">
              <span>${ele.user.nick_name}</span>
            </div>
            <!-- 五角星 -->
            <div class="star-rating">
              <span class="star-item iconfont icon-star"></span>
              <span class="star-item iconfont icon-star"></span>
              <span class="star-item iconfont icon-star"></span>
              <span class="star-item iconfont icon-star"></span>
              <span class="star-item iconfont icon-star"></span>
            </div>
          </div>
          <!-- 评论文字 -->
          <div class="text">
            <span>${ele.content}</span>
          </div>
          <!-- 评论时间 -->
          <div class="date">${ele.create_time}</div>
        </div>
    `).join('')
}
talk()
// 渲染评论总数
axios({
    url: '/comment/total',
    params: {
        goodsId
    }
}).then(res => {
    console.log(res)
    document.querySelector('.title .left span').innerHTML = res.data.data.total.all
})

// 首屏直接渲染添加购物车弹框内容 封装函数
async function addShopcar() {
  const res = await axios.get('/goods/detail', { params: { goodsId } })
  document.querySelector('.topLeft img').src = res.data.data.detail.goods_image
  document.querySelector('.top-right').innerHTML = `
  <div class="add-price">￥<i>${res.data.data.detail.goods_price_max}</i></div>
  <div class="add-inventory">库存:${res.data.data.detail.stock_total}</div>
  `
  if (res.data.data.detail.stock_total === 0) {
    document.querySelector('.shopp-bottom').style.display = 'none'
  }
}
addShopcar()
// 点击加入购物车跳出弹框
document.querySelector('.footer_add').addEventListener('click',function () {
  document.querySelector('.layer').style.bottom = 0
  document.querySelector('.information_mask').classList.add('mask')
})

// 点击关闭前按钮和遮罩关闭弹窗
document.querySelector('.icon-bangzhu1').addEventListener('click',function () {
  document.querySelector('.layer').style.bottom = '-64vw'
  document.querySelector('.information_mask.mask').classList.remove('mask')
})
document.querySelector('.information_mask').addEventListener('click',function () {
  document.querySelector('.layer').style.bottom = '-64vw'
  document.querySelector('.information_mask.mask').classList.remove('mask')
})

// 点击加号数量加1
let i = 1
document.querySelector('.add').addEventListener('click',function () {
  i++
  document.querySelector('.num').innerHTML = i
  if (i > 1) {
    document.querySelector('.reduce').disabled = false
  }
})
// 减
document.querySelector('.reduce').addEventListener('click',function () {
  i--
  document.querySelector('.num').innerHTML = i
  if (i <= 1) {
    document.querySelector('.reduce').disabled = true
  }
})
// 添加商品到购物车
// document.querySelector('.shopp-bottom a').addEventListener('click', async (e) => {
//   if (e.target.innerHTML === '加入购物车') {
//     const num = document.querySelector('.num').innerHTML
//     const res = await axios.post('/cart/add', {
//       headers: {
//         "Access-Token": localStorage.getItem('token'),
//         platform: 'H5'
//       },
//       goodsId: goodsId,
//       goodsNum: num,
//       goodsSkuId: goods_Sku
//     })
//     console.log(res)
//   }
// })

  
